<template>
  <el-drawer
    :close-on-press-escape="false"
    :model-value="isVisible"
    :size="props.size"
    :title="props.title"
    @closed="handleClosed"
    @open="handleOpen"
  >
    <slot />
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: '提示',
  },
  size: {
    type: [Number, String],
    default: '20%',
  },
  visible: {
    type: Boolean,
    default: false,
  },
})

const isVisible = ref(props.visible)

watch(
  () => props.visible,
  (value) => {
    isVisible.value = value
  },
)
watch(isVisible, (value) => {
  emit('update:visible', value)
})
interface EmitsType {
  (e: 'closed'): void
  (e: 'open'): void
  (e: 'update:visible', value: boolean): void
}
const emit = defineEmits<EmitsType>()

const handleClosed = () => {
  emit('closed')
}
const handleOpen = () => {
  emit('open')
}
</script>

<style lang="scss" scoped></style>
